<script lang="ts" setup>
import { reactive, ref, computed, onMounted, watchEffect, toRaw } from 'vue';
import API from '@/services';
import { useRouter, useRoute } from 'vue-router';
import PageCaontainer from '@/arco-components/PageContainer';
import TableStructure from './tableStructure/index.vue';
import TableData from './tableData/index.vue';
import IntegratedMode from './integratedMode/index.vue';
import { Message } from '@arco-design/web-vue';
import { IconEdit } from '@arco-design/web-vue/es/icon';
const route = useRoute();
let tableId = ref(route.query.id);
const isEdit = ref<boolean>(true);
const router = useRouter();
const tabKey = ref<string>('structure');

const showIconEdit = ref<boolean>(false);

// 表详情数据传递给子组件
let tableDetail: any = reactive({
  info: {}
});
const updateTypeText = ref<any>();

let descriptionValue = ref<any>();

// 表详情接口
watchEffect(async () => {
  try {
    const { data, code } = await API.dataTable.getDataTableGetById({
      id: tableId.value as unknown as number
    });
    if (code === 200) {
      tableDetail.info = data;
      descriptionValue.value = data?.tableDesc;
      updateTypeText.value =
        data?.updateType === 1
          ? '全量'
          : data?.updateType === 2
          ? '增量'
          : '拉链';
    }
  } catch (error) {}
});
// 返回上一页
const handleGoback = () => {
  router.go(-1);
};

// 备注保存
const handleSaveDescript = async () => {
  let params = {
    tableDesc: descriptionValue.value,
    id: tableId.value as unknown as number
  };
  try {
    const { code, data }: any = await API.dataTable.postDataTableUpdateTable({
      ...params
    });
    if (code === 200) {
      isEdit.value = true;
      Message.success('更新成功');
    }
  } catch (error) {
    console.log(error);
  }
};
// 表删除
const handleDeleteTable = async () => {
  try {
    const { code, msg } = await API.dataTable.deleteDataTableDeleteById({
      id: tableId.value as any
    });
    if (code === 200) {
      Message.success('删除成功');
      handleGoback();
    } else {
      Message.error(msg || '接口出错了');
    }
  } catch (error) {}
};
</script>
<template>
  <PageCaontainer show-back @back="handleGoback">
    <a-card class="model-manage-detail-card">
      <div class="table-name-top">
        <span class="table-name-top_l fs16">{{
          tableDetail.info?.tableName
        }}</span>
        <span class="table-name-top_r">
          <ul>
            <li class="fs12 col_9B9">
              <span>{{ tableDetail.info?.createByName }}</span>
              <span> 创建于 </span>
              <span>{{ tableDetail.info?.createTime }}</span>
            </li>
          </ul>
          <a-button type="outline" @click="handleDeleteTable">删除</a-button>
        </span>
      </div>
      <a-divider />
      <div class="table-name-remark p-18">
        <span class="fs12 col_9B98">备注：</span>
        <div class="min-width90">
          <span
            class="text-width"
            @mouseover="
              () => {
                showIconEdit = true;
              }
            "
            @mouseout="
              () => {
                showIconEdit = false;
              }
            "
          >
            <span v-show="isEdit">{{ descriptionValue }}</span>
            <icon-edit
              v-show="showIconEdit"
              class="edit_icon"
              @click="
                () => {
                  isEdit = false;
                  showIconEdit = false;
                }
              "
              :style="{ fontSize: '12px', color: '#396EFE', marginLeft: '6px' }"
            />
          </span>
          <a-input
            v-show="!isEdit"
            v-model="descriptionValue"
            :style="{ width: '437px' }"
            allow-clear
            @press-enter="handleSaveDescript"
          >
            <template #suffix>
              <icon-info-circle />
            </template>
          </a-input>
        </div>
        <span class="fs12 col_9B98 ml-60">更新方式：</span>
        <span class="col_333">{{ updateTypeText }}</span>
      </div>
      <a-divider />
      <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
        <a-tab-pane key="structure" title="表结构">
          <TableStructure :table-detail="tableDetail.info"></TableStructure>
        </a-tab-pane>
        <a-tab-pane key="data" title="数据">
          <TableData></TableData>
        </a-tab-pane>
        <a-tab-pane key="integrated" title="集成方式">
          <IntegratedMode :table-detail="tableDetail.info"></IntegratedMode>
        </a-tab-pane>
        <!-- <a-tab-pane key="monitoring" title="监控"> </a-tab-pane> -->
      </a-tabs>
    </a-card>
  </PageCaontainer>
</template>

<style lang="scss" scoped>
.model-manage-detail-card {
  height: 100%;
  overflow: auto;
  :deep(.arco-card-body) {
    padding: 0px;
    .arco-divider-horizontal {
      margin: 10px 0;
    }
    & {
      .arco-tabs-tab.arco-tabs-tab-closable {
        margin: 0 30px;
      }
    }
  }
}

.table-name-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 0;
  &_l {
    color: #33353b;
  }
  &_r {
    display: flex;
    > ul {
      margin-right: 8px;
      li {
        list-style: none;
      }
    }
  }
}
.table-name-remark {
  display: flex;
  align-items: center;
}
.text-width {
  padding: 4px 6px;
}
.min-width90 {
  min-width: 90px;
}
</style>
